<div class="ngm-formly__title" *ngIf="props?.title">{{ props.title }}</div>

<ng-container *ngIf="props?.type === 'inline'">
  <ng-container *ngTemplateOutlet="inlineTable"></ng-container>
</ng-container>

<button
  *ngIf="props?.type !== 'inline'"
  mat-button
  ngmAppearance="dashed"
  displayDensity="cosy"
  [class.mat-accent]="data.length"
  (click)="open()"
>
  <mat-icon fontSet="material-icons-outlined">edit</mat-icon>{{props?.title ?? ('FORMLY.TABLE.Open' | translate:
  {Default: 'Open'} ) }}
</button>

<ng-template #inlineTable>
  <div class="overflow-auto w-full">
    <table
      mat-table
      [dataSource]="data"
      class="mat-elevation-z w-full"
      cdkDropList
      [cdkDropListData]="data"
      (cdkDropListDropped)="drop($event)"
    >
      <ng-container matColumnDef="_sort_">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element" cdkDragHandle class="pac-formly-table__drag-handle">
          <svg
            t="1630562920128"
            class="cursor-pointer dark:fill-slate-200"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2318"
            width="20"
            height="20"
          >
            <path
              d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
              p-id="2319"
            ></path>
          </svg>
        </td>
      </ng-container>
      @for (column of columns; track column.key; let j = $index) {
        <ng-container [matColumnDef]="column.key">
          <th mat-header-cell *matHeaderCellDef [style.width]="column.width">{{ column.label }}</th>
          <td mat-cell *matCellDef="let element; let i = index">
            <formly-field [field]="field.fieldGroup[i]?.fieldGroup[j]" [style.width]="column.width"></formly-field>
          </td>
        </ng-container>
      }

      <ng-container matColumnDef="_actions_">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element; let i = index">
          <button mat-icon-button displayDensity="cosy" ngmAppearance="danger" (click)="deleteRow(i)">
            <mat-icon>close</mat-icon>
          </button>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" cdkDrag cdkDragLockAxis="y"></tr>
    </table>
  </div>
  <div class="my-2">
    <button mat-button ngmAppearance="dashed" displayDensity="cosy" (click)="addRow()">
      <div class="flex items-center justify-start">
        <mat-icon fontSet="material-icons-outlined">add</mat-icon>
        {{'FORMLY.TABLE.AddRow' | translate: {Default: 'Add'} }}
      </div>
    </button>
  </div>
</ng-template>

<ng-template #dialogRef>
  <header mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <h4 style="pointer-events: none">
      {{ props?.title || ('FORMLY.TABLE.Options' | translate: {Default: 'Options'}) }}
    </h4>
  </header>

  <mat-dialog-content class="pac-formly-mat-table">
    <ng-container *ngTemplateOutlet="inlineTable"></ng-container>
  </mat-dialog-content>

  <mat-dialog-actions class="flex justify-between items-center">
    <div>
      <button mat-button (click)="clear()">{{ 'FORMLY.COMMON.Clear' | translate: {Default: 'Clear'} }}</button>
    </div>

    <div ngmButtonGroup>
      <button mat-button mat-dialog-close>{{ 'FORMLY.COMMON.Cancel' | translate: {Default: 'Cancel'} }}</button>
      <button mat-raised-button color="accent" cdkFocusInitial [mat-dialog-close]="true">
        {{ 'FORMLY.COMMON.Apply' | translate: {Default: 'Apply'} }}
      </button>
    </div>
  </mat-dialog-actions>
</ng-template>
